<template>
    <div>
        <h2>商品库</h2>
        <el-divider></el-divider>
        <el-tabs v-model="activeName">
            <el-tab-pane label="全部" name="first">
                <el-card>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="formInline.user" placeholder="商品名称" suffix-icon="el-icon-search"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="formInline.shop" placeholder="全部店铺">
                                <el-option label="全部店铺" value="1"></el-option>
                                <el-option label="众哲鑫商城" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="formInline.status" placeholder="上架状态">
                                <el-option label="上架中" value="1"></el-option>
                                <el-option label="未上架" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="formInline.interval" placeholder="价格区间">
                                <el-option label="1-500" value="1"></el-option>
                                <el-option label="501-1000" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}">
                        <el-table-column prop="name" label="商品名称">
                        </el-table-column>
                        <el-table-column prop="frame" label="上架">
                        </el-table-column>
                        <el-table-column prop="platform" label="平台">
                        </el-table-column>
                        <el-table-column prop="shop" label="店铺">
                        </el-table-column>
                        <el-table-column prop="stock" label="库存">
                        </el-table-column>
                        <el-table-column prop="sales" label="销量">
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" sortable>
                        </el-table-column>
                        <el-table-column prop="userName" label="创建者">
                        </el-table-column>
                        <el-table-column label="操作">
                            <el-button type="text" v-if="tableData.frame == '未上架'">上架</el-button>
                            <el-button type="text" v-if="tableData.frame == '上架中'">下架</el-button>
                            <el-button type="text" @click="view=true">详情</el-button>
                            <el-button type="text" @click="edit=true">编辑</el-button>
                            <el-button type="text" @click="delet">删除</el-button>
                        </el-table-column>
                    </el-table>
                    <!--详情-->
                    <el-dialog title="详情" :visible.sync="view" width="30%" :close-on-click-modal="false">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="商品名称">
                                <el-input v-model="form.name" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="上架">
                                <el-input v-model="form.frame" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="平台">
                                <el-input v-model="form.platform" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="店铺">
                                <el-input v-model="form.shop" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="库存">
                                <el-input v-model="form.stock" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="销量">
                                <el-input v-model="form.sales" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="创建时间">
                                <el-input v-model="form.createTime" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="创建者">
                                <el-input v-model="form.userName" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="close">返回</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    <!--编辑-->
                    <el-dialog title="编辑" :visible.sync="edit" width="30%" :close-on-click-modal="false">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="商品名称">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="上架">
                                <el-input v-model="form.frame"></el-input>
                            </el-form-item>
                            <el-form-item label="平台">
                                <el-input v-model="form.platform"></el-input>
                            </el-form-item>
                            <el-form-item label="店铺">
                                <el-input v-model="form.shop"></el-input>
                            </el-form-item>
                            <el-form-item label="库存">
                                <el-input v-model="form.stock"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="close">取消</el-button>
                                <el-button @click="update">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="众哲鑫商城" name="second">
                <div v-if="currentPanel == 'list'">
                    <el-card>
                        <el-row>
                            <el-col :span="22">
                                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                    <el-form-item>
                                        <el-input v-model="formInline.user" placeholder="商品名称" suffix-icon="el-icon-search"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-select v-model="formInline.status" placeholder="上架状态">
                                            <el-option label="上架中" value="1"></el-option>
                                            <el-option label="未上架" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-select v-model="formInline.interval" placeholder="价格区间">
                                            <el-option label="1-500" value="1"></el-option>
                                            <el-option label="501-1000" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col :span="2">
                                <el-button type="primary" @click="currentHandler('commodityAdd')">创建商品</el-button>
                            </el-col>
                        </el-row>
                        <el-table :data="table" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}">
                            <el-table-column prop="name" label="商品名称">
                            </el-table-column>
                            <el-table-column prop="frame" label="上架">
                            </el-table-column>
                            <el-table-column prop="platform" label="平台">
                            </el-table-column>
                            <el-table-column prop="stock" label="库存">
                            </el-table-column>
                            <el-table-column prop="number" label="访问人数">
                            </el-table-column>
                            <el-table-column prop="visits" label="访问次数">
                            </el-table-column>
                            <el-table-column prop="sales" label="销量" sortable>
                            </el-table-column>
                            <el-table-column prop="createTime" label="创建时间" sortable>
                            </el-table-column>
                            <el-table-column prop="userName" label="创建者">
                            </el-table-column>
                            <el-table-column prop="department" label="适用部门">
                            </el-table-column>
                            <el-table-column label="操作">
                                <el-button type="text" v-if="table.frame == '未上架'">上架</el-button>
                                <el-button type="text" v-if="table.frame == '上架中'">下架</el-button>
                                <el-button type="text" @click="details=true">详情</el-button>
                                <el-button type="text" @click="save=true">编辑</el-button>
                                <el-button type="text" @click="delet">删除</el-button>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <!--详情-->
                    <el-dialog title="详情" :visible.sync="details" width="30%" :close-on-click-modal="false">
                        <el-form ref="form" :model="forms" label-width="80px">
                            <el-form-item label="商品名称">
                                <el-input v-model="forms.name" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="上架">
                                <el-input v-model="forms.frame" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="平台">
                                <el-input v-model="forms.platform" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="库存">
                                <el-input v-model="forms.number" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="访问人数">
                                <el-input v-model="forms.stock" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="访问次数">
                                <el-input v-model="forms.visits" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="销量">
                                <el-input v-model="forms.sales" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="创建时间">
                                <el-input v-model="forms.createTime" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="创建者">
                                <el-input v-model="forms.userName" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="适用部门">
                                <el-input v-model="forms.department" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="close">返回</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    <!--编辑-->
                    <el-dialog title="编辑" :visible.sync="save" width="30%" :close-on-click-modal="false">
                        <el-form ref="form" :model="forms" label-width="80px">
                            <el-form-item label="商品名称">
                                <el-input v-model="forms.name"></el-input>
                            </el-form-item>
                            <el-form-item label="上架">
                                <el-input v-model="forms.frame"></el-input>
                            </el-form-item>
                            <el-form-item label="平台">
                                <el-input v-model="forms.platform"></el-input>
                            </el-form-item>
                            <el-form-item label="库存">
                                <el-input v-model="forms.number"></el-input>
                            </el-form-item>
                            <el-form-item label="适用部门">
                                <el-select v-model="form.department" placeholder="请选择部门">
                                    <el-option label="运营部" value="shanghai"></el-option>
                                    <el-option label="销售部" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="close">取消</el-button>
                                <el-button type="primary" @click="saves">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>
                <div v-if="currentPanel == 'commodityAdd'">
                    <commodityAdd @currentHandler=currentHandler></commodityAdd>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import commodityAdd from "@/views/merchOrder/commodity/commodityAdd"
export default {
    name: "commodity",
    components: {
      commodityAdd
    },
    data() {
        return {
            view: false,
            edit: false,
            currentPanel: 'list',
            activeName: 'first',
            formInline: {
                user: '',
                shop: '',
                status: '',
                interval: ''
            },

            tableData: [{
                name: '微信支付黑色笔记本',
                frame: '未上架',
                platform: '淘宝',
                shop: '微信支付',
                stock: '200',
                sales: '300',
                createTime: '2021-11-15 15:15:00',
                userName: '董鹏'
            }],

            form: {
                name: '微信支付黑色笔记本',
                frame: '未上架',
                platform: '淘宝',
                shop: '微信支付',
                stock: '200',
                sales: '300',
                createTime: '2021-11-15 15:15:00',
                userName: '董鹏'
            },

            table: [{
                name: '微信支付黑色笔记本',
                frame: '未上架',
                platform: '淘宝',
                stock: '200',
                number: '700',
                visits: '700',
                sales: '300',
                createTime: '2021-11-15 15:15:00',
                userName: '董鹏',
                department: '运营部'
            }],
            details: false,
            save: false,
            forms: {
                name: '微信支付黑色笔记本',
                frame: '未上架',
                platform: '淘宝',
                stock: '200',
                number: '700',
                visits: '700',
                sales: '300',
                createTime: '2021-11-15 15:15:00',
                userName: '董鹏',
                department: 'shanghai'
            }
        }
    },
    methods: {
        currentHandler(type) {
            this.currentPanel = type
        },
        close() {
            this.view = false
            this.edit = false
            this.details = false
            this.save = false
        },
        saves() {
          this.$message({
              message: '保存成功',
              type: 'success'
          })
            this.close()
        },
        update() {
            this.$message({
                message: '保存成功',
                type: 'success'
            })
            this.close()
        },
        delet() {
            this.$confirm('确定要删除吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        }
    }
}
</script>

<style scoped>

</style>
